<template>
	<view class="container">
		<!-- 全选 -->
		<view class="sel_all_div">
			<view style="padding-right: 20rpx; font-size: 28rpx; color: #000" @tap="onAllCbClick">全选</view>
			<checkbox-group style="margin-right: 16rpx" @change="onAllCbChange">
				<checkbox :checked="isAllChecked"></checkbox>
			</checkbox-group>
		</view>

		<!-- 占位 -->
		<view style="height: 70rpx"></view>

		<!-- 物业房租列表 -->
		<view class="item" :data-index="index" v-for="(item, index) in bill_list" :key="item.id">
			<!-- 定位图标 房间名 选中状态 -->
			<view style="display: flex; margin-top: 10rpx">
				<image src="/static/assets/house_16.png" style="width: 26rpx; height: 32rpx; margin: 12rpx 0 0 20rpx"></image>
				<view class="item_name">{{ item.group.house_name }}</view>
				<checkbox-group @change="onCbChange" :data-index="index">
					<checkbox :disabled="item.isDisable" :checked="item.isChecked" :value="JSON.stringify(item.id)"></checkbox>
				</checkbox-group>
			</view>

			<!-- 业主信息 房间面积 -->
			<view style="display: flex; margin: 20rpx 0 0 20rpx; justify-content: space-between">
				<view style="font-size: 28rpx; color: #999">业主：{{ item.group.owner_name }}</view>
				<view style="color: #ff0000; font-size: 30rpx; margin: 0 30rpx 0 0">￥{{ item.amount_total }}</view>
			</view>

			<!-- 类型 -->
			<view style="font-size: 28rpx; color: #999; margin: 20rpx 0 0 20rpx">类型：房租/物业</view>

			<!-- 缴费时间 -->
			<view style="font-size: 28rpx; color: #999; margin: 20rpx 0 20rpx 20rpx">{{ item.desc }}</view>
		</view>

		<view v-if="!bill_list || bill_list.length <= 0" style="margin: 300rpx auto; color: #cccccc">暂无数据~</view>

		<!-- 占位 -->
		<view style="height: 110rpx"></view>

		<!-- 底部固定的布局 -->
		<block v-if="isShowBottom">
			<view style="display: flex; width: 100%; position: fixed; left: 0; bottom: 0rpx; align-items: center; border-top: #e5e5e5 solid 1rpx; background-color: white">
				<!-- 已选 总计 -->
				<view style="color: #000; font-size: 32rpx; margin-left: 20rpx">合计：</view>

				<!-- 合计金额 缴费明细 -->
				<view style="display: flex; flex-direction: column; flex-grow: 1">
					<view style="color: #ff9900; font-size: 32rpx">¥{{ total }}</view>
				</view>
				<view></view>

				<!-- 缴费 -->
				<view style="display: flex; align-items: center; justify-content: center; background-color: #25b785; height: 90rpx; width: 240rpx" @tap="onCharge">
					<view style="color: #fff; font-size: 34rpx">缴费</view>
				</view>
			</view>
		</block>
	</view>
</template>

<script>
	const app = getApp()
	const util = require('../../../../utils/util')
	import { getBillList } from '../../../../utils/http/api'
	export default {
		data() {
			return {
				// 是否隐藏底部布局
				isShowBottom: true,
				// 记录是否全选
				isAllChecked: false,
				// 记录底部多选的合计金额
				total: 0,
				// 记录选中缴费项目的ids，需要传到下一个页面请求数据
				ids: '',
				bill_list: []
			}
		},
		onLoad(options) {

		},
		onShow() {
			this.reqMyBillList()
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.reqMyBillList()
		},
		methods: {
			// 监听子项选择框
			onCbChange(e) {
				let index = e.currentTarget.dataset.index
				if (e.detail.value.length > 0) {
					// 当前子项被选中
					this.bill_list[index].isChecked = true
				} else {
					this.bill_list[index].isChecked = false
				}
				this.setData({ bill_list: this.bill_list })

				// 子项选中和外层全选联动
				let isCheckAll = true; // 标记是否需要全选
				for (let i = 0; i < this.bill_list.length; i++) {
					if (!this.bill_list[i].isChecked) {
						// 有一个子项未选中，则外层全选取消
						isCheckAll = false
						break
					}
				}
				this.setData({ isAllChecked: isCheckAll })
				this.setTotal() // 设置总金额
			},

			// 监听外层全选框
			onAllCbChange(e) {
				if (e.detail.value.length > 0) {
					// 全选
					this.setData({ isAllChecked: true })
					for (let i = 0; i < this.bill_list.length; i++) {
						this.bill_list[i].isChecked = true // 子项全选
					}
				} else {
					// 取消全选
					this.setData({ isAllChecked: false })
					for (let i = 0; i < this.bill_list.length; i++) {
						this.bill_list[i].isChecked = false // 子项全不不不选
					}
				}

				this.setData({ bill_list: this.bill_list }) // 刷新数据
				this.setTotal() // 设置总金额
			},

			// 监听点击全选按钮
			onAllCbClick(e) {
				if (!this.isAllChecked) {
					// 当前未全选，进行全选操作
					for (let i = 0; i < this.bill_list.length; i++) {
						this.bill_list[i].isChecked = true // 子项全选
					}
				} else {
					// 取消全选
					for (let i = 0; i < this.bill_list.length; i++) {
						this.bill_list[i].isChecked = false // 子项全不不不选
					}
				}

				this.setData({ bill_list: this.bill_list, isAllChecked: !this.isAllChecked }) // 刷新数据
				this.setTotal() // 设置总金额
			},

			// 计算并设置总金额
			setTotal(e) {
				let tmpMoney = 0; // 临时记录总金额
				let ids = '' // 每次遍历数据前,先置空选中的ids
				for (let i = 0; i < this.bill_list.length; i++) {
					if (this.bill_list[i].isChecked) {
						tmpMoney = parseFloat(tmpMoney) + parseFloat(this.bill_list[i].amount_total)
						ids += ',' + this.bill_list[i].id
					}
				}
				this.setData({ total: tmpMoney, ids: ids })
			},

			// 点击右下角缴费
			onCharge(e) {
				if (this.total > 0) {
					let ids = this.ids;
					if (util.isNull(ids)) {
						uni.showToast({ title: '请选择缴费项目', icon: 'error' })
						return
					}
					ids = ids.substring(1);
					let url = '/pages/charge/house/pro_charge_2/pro_charge_2?ids=' + ids
					util.navigateTo(url)
				} else {
					uni.showToast({ title: '请选择缴费项目', icon: 'none' })
				}
			},

			// 请求我的账单 待缴物业房租费
			async reqMyBillList() {
				uni.showLoading({ title: '处理中', mask: true })
				let { code, msg, data } = await getBillList({ page: '1', limit: '999999', token: app.globalData.gl.token })
				uni.stopPullDownRefresh()
				if (code == '1') {
					this.setData({ bill_list: data.data })
				} else {
					uni.showToast({ title: msg, icon: 'error' })
				}
				this.setData({ isAllChecked: false, total: 0, ids: '' }) // 取消全选 置空选择的项目
				this.setTotal() // 设置总金额
			}
		}
	};
</script>
<style scoped>
	.container {
		display: flex;
		width: 100%;
		height: 100%;
		flex-direction: column;
	}

	.sel_all_div {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		height: 70rpx;
		position: fixed;
		top: 70rpx;
		width: 100%;
		background-color: white;
		z-index: 999
	}

	.item {
		display: flex;
		flex-direction: column;
		position: relative;
		margin: 10rpx 10rpx 10rpx 10rpx;
		border-width: 5rpx;
		border-color: #f8f8f8;
		border-style: solid;
		border-radius: 10rpx;
	}

	.item_name {
		width: 200rpx;
		height: auto;
		flex-grow: 1;
		margin-left: 20rpx;
		margin-right: 20rpx;
		margin-top: 10rpx;
		font-size: 30rpx;

		display: -webkit-box;
		word-break: break-all;
		text-overflow: ellipsis;
		overflow: hidden;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	/* 重写 checkbox 样式 */
	checkbox .wx-checkbox-input {
		margin-right: 20rpx;
		border-radius: 50%;
		/* 圆角 */
		width: 34rpx;
		/* 背景的宽 */
		height: 34rpx;
		/* 背景的高 */
	}

	/* 选中后的 背景样式 （红色背景 无边框 可根据UI需求自己修改） */
	checkbox .wx-checkbox-input.wx-checkbox-input-checked {
		border: 1rpx solid #ff9900;
		background: #ff9900;
	}

	/* 选中后的 对勾样式 （白色对勾 可根据UI需求自己修改） */
	checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {
		border-radius: 50%;
		/* 圆角 */
		width: 30rpx;
		/* 选中后对勾大小，不要超过背景的尺寸 */
		height: 30rpx;
		/* 选中后对勾大小，不要超过背景的尺寸 */
		line-height: 30rpx;
		text-align: center;
		font-size: 30rpx;
		/* 对勾大小 30rpx */
		color: #fff;
		/* 对勾颜色 白色 */
		background: transparent;
		transform: translate(-50%, -50%) scale(1);
		-webkit-transform: translate(-50%, -50%) scale(1);
	}
</style>